<template>
  <div
    :style="
      'width:' +
      screenWidth +
      'px;height:' +
      screenHeight +
      'px;overflow-y: auto;'
    "
  >
    <Header :Current="-1" @CurrentSelection="CurrentSelection"></Header>
    <div class="box_body">
      <div class="box_title" v-html="setTitle"></div>
      <div
        class="box_createdTime"
        v-if="modifiedTime"
        v-html="modifiedTime"
      ></div>
      <div class="box_createdTime" v-else v-html="createdTime"></div>
      <div class="box_content" v-html="allcontent"></div>
    </div>
    <Footer></Footer>
  </div>
</template>
  <script>
import axios from "axios";
import Header from "@/componets/Header.vue";
import Footer from "@/componets/Footer.vue";
let moment = require("moment");
export default {
  name: "header",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      setTitle: "",
      allcontent: "",
      screenWidth: 0,
      screenHeight: 0,
    };
  },
  mounted() {
    this.updateScreenSize();
    window.addEventListener("resize", this.updateScreenSize);
    this.getContetn();
  },
  created() {},
  beforeDestroy() {
    window.removeEventListener("resize", this.updateScreenSize);
  },
  methods: {
    updateScreenSize() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    },
    CurrentSelection(index, value) {
      this.CurrentNum = index;
      if (value == undefined) {
        value = index;
      }
      switch (value) {
        case 0:
          this.$router.push({
            name: "home",
          });
          break;
        case 1:
          this.$router.push({
            name: "OverseasOutstandingYouth",
          });
          break;
        case 2:
          this.$router.push({
            name: "TalentProject",
          });
          break;
        case 3:
          this.$router.push({
            name: "NationalNatural",
          });
          break;
        case 4:
          this.$router.push({
            name: "ScientificResearchDrawings",
          });
          break;
        case 5:
          this.$router.push({
            name: "ppt",
          });
          break;
        case 6:
          this.$router.push({
            name: "ResearchInformation",
          });
          break;
        case 8:
          this.$router.push({
            name: "searchInput",
          });
          break;
        case 20:
          this.$router.push({
            name: "ThesisGuidance",
          });
          break;
        default:
          break;
      }
    },
    getContetn() {
      let data = {
        id: this.$route.query.id * 1,
      };
      console.log(data);
      axios.post(`/textcontent/read`, data).then((res) => {
        console.log("获取", res);
        let { code, message, result } = res;
        if (code == "ok") {
          console.log(result);
          this.allcontent = result.content;
          this.setTitle = result.title;
          this.createdTime = moment(result.createdTime).format("YYYY-MM-DD");
          this.modifiedTime = result.modifiedTime
            ? moment(result.modifiedTime).format("YYYY-MM-DD")
            : "";
        } else {
        }
      });
    },
  },
};
</script>

  <style scoped>
.box_body {
  width: 1920px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  overflow: auto;
}
.box_title {
  padding: 100px 0 20px;
  width: 1920px;
  text-align: center;
  margin: 0 auto;
  font-family: "PingFangSC, PingFang SC";
  font-weight: 600;
  font-size: 30px;
  color: #1a1a1a;
  border-top: 4px solid #0365fe;
}
.box_createdTime {
  font-size: 24px;
  text-align: center;
  padding: 0 0 30px;
}
.box_content {
  padding: 30px 0;
  border-top: 2px solid #dcdcdc;
  width: 1304px;
  /* border: 1px solid red; */
  /* overflow: hidden; */
  /* background-color: #fff; */
}
</style>